<template>
	<view class="jk-page-container bg">
    <u-sticky>
      <view class="search-bar">
        <view class="search-bar-top-box">
          <view class="search-bar-item" style="border-right: solid 1rpx #5c7cf7;" @click="onClickWorkshop">
            <view class="search-bar-item-val">{{ searchParams.workshopName || searchParams.workshopName }}</view>
            <u-icon name="arrow-down-fill" size="14" color="#fff"></u-icon>
          </view>
          <view class="search-bar-item" @click="onToModifyBtn">
            <view class="item-gap"><u-icon name="plus" size="14" color="#fff"></u-icon></view>
            <view class="search-bar-item-val">新增</view>
          </view>
        </view>
        <u-search
            :inputStyle="{ height: '38px' }"
            shape="square"
            placeholder="设备编号"
            height="68rpx"
            v-model="searchParams.machineCode"
            :disabled="disabled"
            :actionStyle="{ color: '#fff', fontSize: '16px' }"
            @search="onSearchBtn"
            @clear="onSearchBtn('')"
            @custom="onSearchBtn"
        ></u-search>
      </view>
    </u-sticky>
    <view class="column-list-container">
      <view
        v-for="(item) in tableData"
        :key="item.id"
        class="column-list-item"
      >
        <view class="column-list-item-default flex-between-center">
          <view class="column-list-item-title">{{ item.machineName }}</view>
          <view class="column-list-item-sub-title">{{ openingStateConfig[item.openingState].name }}</view>
        </view>
        <view class="column-list-item-default column-list-item-sub-title">翻改日期：{{ item.changeDate }}</view>
        <view class="column-list-item-default column-list-item-sub-title">翻改品种：{{ item.productName }}</view>
        <view class="column-list-item-default column-list-item-sub-title">改前品种：{{ item.preProductName }}</view>
        <view class="column-list-item-default column-list-item-sub-title flex-between-center">
          <view>通知单号：{{ item.prdNoticeCode }}</view>
          <view>
            <!--<u-button @click="onToModifyBtn(item)" type="success" color="#5c6be3" size="mini">开台</u-button>-->
          </view>
        </view>
      </view>
      <jk-no-more :pageIndex="searchParams.pageNo" :show="isNoMore" />
    </view>
  </view>
</template>

<script>
  import {prdNoticeMachineChangeList, userDataWorkshops} from "../../../api";
  import {isLastPage, pageConfig, showLoading} from "../../../utils/jk-utils";
  import loadingMore from '../../../mixins/loading-more';
  import jkNoMore from "../../../jk-components/jk-no-more";
  export default {
    mixins: [loadingMore],
    components: {jkNoMore},
    data() {
			return {
			  apiConfig: {
			    list: prdNoticeMachineChangeList
        },
			  openingStateConfig: {
          0: { name: '未开台' },
          1: { name: '已开台' },
          2: { name: '已了机' },
        },
        searchParams: {
          pageIndex: 1,
          pageSize: pageConfig.pageSize,
          totalCount: pageConfig.totalCount,
          machineCode: '',
          workshopId: null,
          workshopName: '',
          processId: null,
          processName: '',
          startState: 0
        },
        tableData: [],
        workshopList: [],
			}
		},
		onLoad() {
		},
    onShow() {
      this.getDependentData();
    },
		methods: {
      onClearOfSearchIpt() {
        this.$set(this.searchParams, 'machineCode', '');
        this.onSearchBtn();
      },
      onToModifyBtn({ id }) {
        uni.navigateTo({
          url: `/pages/production/modifyProduct/toModify`
        })
      },
      onSearchBtn(e) {
        this.$set(this.searchParams, 'machineCode', e);
        this.getListRequest();
      },
      async getDependentData() {
        showLoading(true);
        this.searchParams.pageNo = 1;
        await this.getWorkshopDataRequest();
        if (this.searchParams.workshopId) await this.getListRequest();
        showLoading(false);
      },
      getListRequest() {
        showLoading(true);
        this.searchParams.pageNo = 1;
        return this.apiConfig['list'](this.searchParams).then(res => {
          showLoading(false);
          if (res.data.status === 200) {
            this.$set(this.searchParams, 'totalCount', res.data.count);
            this.tableData = res.data.res;
            this.isNoMore = isLastPage(this.searchParams.totalCount, this.searchParams.pageSize, this.searchParams.pageNo);
          }
        })
      },
      getWorkshopDataRequest() {
        return userDataWorkshops().then(res => {
          if (res.data.status === 200) {
            this.$set(this.searchParams, 'workshopId', res.data.res.defaultUserDataEntity.workshopId);
            this.$set(this.searchParams, 'workshopName', res.data.res.defaultUserDataEntity.workshopName);
            this.workshopList = res.data.res.workshopList.map(x => {
              return {
                id: x.workshopId,
                name: x.workshopName
              }
            });
          }
        })
      },
      onClickWorkshop() {
        let _this = this;
        uni.showActionSheet({
          itemList: _this.workshopList.map(x => x.workshopName),
          success (res) {
            _this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
            _this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex].workshopName);
            _this.getListRequest();
          }
        });
      }
		},
    onReachBottom() {
      this.getMore();
    }
	}
</script>

<style lang="scss" scoped>
</style>
